/**
 * @description 饼图（饼）
 * 饼 
 * 饼2 空心饼图 radius配置：radius: ['25%', '55%']
 * 饼3 基础南丁格尔玫瑰图 roseType: 'area'配置
 * 
 */

import echarts from "../echart"
import { useEffect, useRef } from 'react';
import useChartResize from "@/hooks/useChartResize";
import { getPieMock } from "../mockData";

function Pie({ configData, chart }) {
  let { title, graphType } = configData
  const chartRef = useRef(null)
  const boxRef = useRef()


  useEffect(() => {

    // 图表配置项
    let themeConfig = chart.pie

    // 限制数量
    let limitNum = chart.base.pieNum

    // 基于准备好的dom，初始化echarts实例
    if (!chartRef.current) {
      let myChart = echarts.init(boxRef.current)
      chartRef.current = myChart
    }


    let yAxisData = getPieMock(limitNum)

    // 饼，饼1，饼2的区分
    let seriesObj = {}
    switch (graphType) {
      case '饼':
        seriesObj.radius = '55%'
        break;

      case '饼2':
        seriesObj.radius = ['25%', '55%']
        break;

      case '饼3':
        seriesObj.radius = ['25%', '55%']
        seriesObj.roseType = 'area'
        break;
    }
    seriesObj = {
      ...seriesObj,
      type: 'pie',
      data: yAxisData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      ...themeConfig.series,
    }


    const options = {
      backgroundColor: themeConfig.backgroundColor,
      color: themeConfig.color,
      title: {
        ...themeConfig.title,
        text: title,
      },
      // 图例组件
      legend: themeConfig.legend,
      // 直角坐标系内绘图网格
      grid: themeConfig.grid,
      // 提示框组件
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
        ...themeConfig.tooltip
      },
      series: [seriesObj]
    }


    // 绘制图表
    chartRef.current.setOption(options, true)
  }, [chart])

  useChartResize(boxRef, chartRef)

  return (
    <div className='chart-box' ref={boxRef} ></div>
  )
}
export default Pie